<!--jq版飘图--闭包-->
<!--需要jq.js支持-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq版飘图--闭包</title>
		<script src="jq/jquery.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="box" style="width:110px;position: relative; left: 0;top: 0;">
			<img src="../public/imgs/1.jpg" width="100" height="100"/>
			<a href="#" id="close" style="text-align:center;background:pink;position: absolute;left:80px; display: inline-block;width:20px;height: 20px;">X</a>
		</div>
	</body>
	<script type="text/javascript">
		var x =1;
		var y=1;
		var pageX =document.documentElement.clientWidth;
		var pageH =document.documentElement.clientHeight;
		var dleft = $("#box").css("left");
		var dtop =$("div").css("top");
		function move(){
			dleft = parseInt(dleft)+x;
			dtop = parseInt(dtop)+y;
			if(dleft>=(pageX-100) || dleft<0){
				x=-x;
			}
			if(dtop>=(pageH-100) || dtop<0){
				y=-y;
			}
			$("#box").css("left",dleft+"px");
			$("#box").css("top",dtop+"px");
		}
		var t= setInterval("move()",10);
		//鼠标移入移出
		$("#box").hover(
			function(){
				clearInterval(t);
			},
			function(){
				t= setInterval("move()",10);
			}
		)
		$("#close").click(function(){
			alert("飘图已经关闭");
			$("#box").remove();
		})
	</script>
</html>